<template>
	<view>
		<view class="page">
			<view @click="navBack" class="circle_top" :style="{marginTop:statusBar + 'px'}">
				<image src="../../../static/images/back.png"></image>
			</view>
			<view class="center">
				<image src="https://dsx.cdzer.net/uploads/circle_bgk.png" mode=""></image>
				<view class="content">
					<view class="city">{{city}}</view>
					<view class="title">商圈人气榜</view>
				</view>
			</view>
			<scroll-view class="circle_list-box" scroll-y @scrolltolower='bottomScroll'>
				<view class="circle_list-item" v-for="(item,index) in list" @click="getNavCircle(item.id)">
					<view class="left">
						<image class="pic" :src="item.picture"></image>
						<view class="label_box" v-if="index<3">
								<image class="label_img" mode="scaleToFill" src="../../../static/images/shop_rank.png"></image>
								<view class="label_tent">
									TOP{{index+1}}
								</view>
						</view>
						<view class="vertical">
							<view class="shop_name">{{item.circle_name}}</view>
							<view class="desc">{{item.desc}}</view>
							<view class="handle">
								<view>{{item.like_num}}人想去</view>
								<view class="distance">{{item.distance}}</view>
							</view>
						</view>
					</view>
					<view class="right" @click.stop="wantWalk(index)">
						<image v-if="item.is_like != 0" src="../../../static/images/miss.png"></image>
						<image v-else src="../../../static/images/no_miss.png" mode=""></image>
						<view >想去</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar:0,
				city:'',
				location:{},
				list:[],
				page:1
			}
		},
		mounted(){
			uni.getSystemInfo({
			    success: e=> {
					let statusBar = 0
					let customBar = 0
					// #ifdef MP-WEIXIN
					this.statusBar = e.statusBarHeight
					// @ts-ignore
					const custom = wx.getMenuButtonBoundingClientRect()
					// this.customBar = custom.bottom + custom.top - e.statusBarHeight
					// #endif
				},
			  }
			)
		},
		onLoad(options) {
			console.log(this.$store,options)
			this.city = options.city
			this.location = this.$store.getters.getLocation
			this.initData()
		},
		methods: {
			getNavCircle(id){
				console.log(id)
				uni.navigateTo({
					url:'../shopDetail/shopDetail?id='+id,
					fail:err=>{
						console.log(err)
					}
				})
			},
			wantWalk(index){
				uni.showLoading({
					// title:'请求中'
				})
				let item = this.list[index]
				this.$http.circlelike({
					circle_id: item.id,
					islike: item.is_like
				}).then(res=>{
					console.log(res)
					if(res.status == 200){
						if(item.is_like == 0){
							uni.showToast({
								title:'关注成功',
								icon:'none',
							})
						}else{
							uni.showToast({
								title:'成功取消',
								icon:'none',
							})
						}
						this.list[index].is_like = this.list[index].is_like == 0 ? 1:0
					}
					uni.hideLoading()
				})
			},
			initData(){
				this.$http.getpopular_list({
					city_name:this.city,
					page: this.page,
					lat:this.location.latitude,
					lng:this.location.longitude
				}).then(res=>{
					console.log(res)
					this.list = this.list.concat(res.data)
				})
			},
			bottomScroll(){
				this.page++
				this.initData()
			},
			navBack(){
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	.page{
		height: 100vh;
		background-color: #0F111D;
		overflow: hidden;
	}
	.circle_top{
		position: fixed;
		left: 3vw;
		z-index: 90;
		height: 80rpx;
		image{
			z-index: 90;
			width: 48rpx;
			margin-top: 16rpx;
			height: 48rpx;
		}
	}
	.center{
		position: relative;
		image{
			width: 100vw;
			height: 400rpx;
		}
		.content{
			z-index: 90;
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translate(-50%,-50%);
			view{
				text-align: center;
				color: #fff;
			}
			.city{
				font-size: 36rpx;
			}
			.title{
				font-size: 72rpx;
			}
		}
	}
	.circle_list-box{
		width: 94vw;
		margin: 3vw;
		height: calc(100vh - 480rpx);
		overflow-y: scroll;
		.circle_list-item{
			display: flex;
			height: 200rpx;
			background-color: #242730;
			border-radius: 10rpx;
			margin: 20rpx 0;
			padding: 15rpx 12rpx;
			justify-content: space-between;
			align-items: center;
			.left{
				position: relative;
				display: flex;
				.pic{
					width: 160rpx;
					height: 160rpx;
					background-color: #0f111d;
					border-radius: 5rpx;
				}
				.label_box{
					position: absolute;
					left: 0;
					top: 0;
					image{
						width: 75rpx;
						height: 35rpx;
						// background-color: #ffd201;
						border-radius: 5rpx 0rpx 0rpx 0rpx;
					}
					.label_tent{
						color: #330808;
						position: absolute;
						left: 0rpx;
						top: 0;
						font-size: 18rpx;
						
					}
				}
				.vertical{
					display: flex;
					flex-direction: column;
					color: #999999;
					justify-content: space-around;
					margin-left: 14rpx;
					.handle{
						display: flex;
						.distance{
							margin-left: 10rpx;
						}
					}
					.shop_name{
						font-size: 30rpx;
						color: #fff;
						font-weight: bold;
					}
				}
			}
			.right{
				display: flex;
				flex-direction: column;
				align-items: center;
				image{
				  width: 31rpx;
				  height: 30rpx;	
				}
				view{
					color: #fff;
					font-size: 24rpx;
					text-align: center;
					margin-top: 20rpx;
				}
			}
		}
		&::-webkit-scrollbar {display:none}
	}
</style>
